﻿
<html>
	<head>
		<title>GXCA证书签章</title>
		<style type="text/css">
		</style>
		<link href="XTX_DEMO_style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>	
		<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
			<tr>
				<td width="10" align="left" valign="top">
				</td>
				<td align="left" valign="top" bgcolor="#FEFDFB">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
						<tr>
							<td>
								&nbsp;
							</td>
							<td>
								<!-- <p align="center">
									<font color="#cc3333" size="3"><b>XTX客户端证书签名DEMO（JS脚本）</b> </font>
								</p> -->
								<p>
								<form method="post" ID="TestForm1">
									<table width="98%" border="0" align="center" cellpadding="5"
										cellspacing="1" class="table1">
										<tr>
											<th colspan="2">
												<font color="#ed5565" style="font-size:14px;">签名前需要先调用验证证书pin码
											</th>
										</tr>
										<tr>
											<td style="font-size:14px; text-align: right;" width="35%">
												证书列表：
											</td>
											<td style="font-size:14px;">
												<select style="height: 27px; padding: 0 5px;" id="UserList" name="UserList">
													<option disabled selected value>请选择证书</option>
												</select>
											</td>
										</tr>
										<tr>
											<td style="font-size:14px; text-align: right;" width="35%">
												证书密码：
											</td>
											<td style="font-size:14px;">
												<input 
													style="height: 32px;" 
													type="password" 
													name="UserPwd" 
													id="UserPwd" 
													size="16" 
													maxlength="16" 
													placeholder="请输入密码"
												>
												<input type="button" value="验证pin码" class="button" style="width: 120px;" onClick="login();">
											</td>
										</tr>
										<tr>
											<td style="font-size:14px;text-align: right;" width="35%">
												类型：
											</td>
											<td style="font-size:14px;">
												<select style="height: 27px; padding: 0 5px;" id="typeList" name="typeList">
													<option disabled selected value>请选择类型</option>
													<option value="SQQZR">个人签章</option>
													<option value="QFZ">骑缝章</option>
													<option value="SYZ">首页章</option>
													<option value="CMA_flag">CMA</option>
													<option value="CNAS_flag">CNAS</option>
												</select>
											</td>
										</tr>	
										<!-- <tr>
											<td style="font-size:14px;">
												<input type="button" value="获取证书" class="button" style="width:100px;" onClick="getCert();">
											</td>
											<td style="font-size:14px;">
												<textarea name=showCert id=showCert cols="40" rows="6">证书显示：</textarea>
											</td>
										</tr>																				 -->
										<tr style="display: none;">
											<td style="font-size:14px;">
												<input type="button" value="获取证书序列号" class="button" style="width:120px;" onClick="getCertInfo();">
											</td>
											<td style="font-size:14px;">
												<textarea disabled name=certSn id=certSn cols="40" rows="6" placeholder="请获取证书序列号"></textarea>
											</td>
										</tr>	
										<tr>
											<td style="font-size:14px;text-align: right;" width="35%">
												签章列表：
											</td>
											<td style="font-size:14px;">
												<select style="height: 27px; padding: 0 5px;" id="sealList" name="sealList">
													<option disabled selected value>请选择签章</option>
												</select>
											</td>
										</tr>												
										<tr style="display: none;">
											<td style="font-size:14px;">
												<div style="color: #ed5565;">数据签名使用</div>
												<input type="button" value="签名" class="button" style="width:120px;" onClick="signedData();">
											</td>
											<td style="font-size:14px;">
												<textarea name=plainData id=plainData cols="40" rows="6"  placeholder="请获取需要签名的数据"></textarea>
											</td>
											<td style="font-size:14px;">
												<textarea name=showplainData id=showplainData cols="40" rows="6" placeholder="请获取签名结果"></textarea>
											</td>
										</tr>
										
										<!--<tr>
											<td style="font-size:14px;">
												<input type="button" value="验签" class="button" style="width:100px;" onClick="verifysignedData();">
											</td>
											<td style="font-size:14px;">
												<textarea name=showsignData id=showsignData cols="40" rows="6">验签结果显示！（记得获取签名结果和证书）</textarea>
											</td>
										</tr>-->

									</table>
								</form>
								</p>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<SCRIPT type="text/javascript" src="XTXSAB.js"></SCRIPT>
		<Script Language="JavaScript">
			var passwordAuthentication = false
			SetUserCertList("TestForm1.UserList");
			var testSealList = []
			window.addEventListener("message", function (event) {
				var data = event.data;
				var test = data.params;
				if(test.sealList){
					TestForm1.sealList.value = test.sealList[0]
					window.parent.postMessage({
						params: {sealSelect:test.sealList[0],typeSelectValue:TestForm1.typeList.value},
						cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
					},'*');
					for(var i = 0; i<=test.sealList.length; i++){
						let arr = testSealList.filter(a=> a == test.sealList[i])
						if(!arr.length && test.sealList[i]){
							testSealList.push(test.sealList[i])
							var select = document.getElementById("sealList"); // 获取下拉框元素
							var option = document.createElement("option"); // 创建一个<option>元素
							option.text = test.sealList[i]; // 设置选项文本
							option.value = test.sealList[i]; // 设置选项值（可选）
							select.add(option); // 把选项添加到下拉框中
						}
						
					}
					
				}
				if(test.sealData){
					TestForm1.plainData.value = test.sealData
					signedData(test.sealData)
				}

			}, '*')

			//选择证书 
			var UserListId = document.getElementById("UserList");
			UserListId.addEventListener("change", function() {
				if(UserListId.options[UserListId.selectedIndex].value !== TestForm1.UserList.value){
					TestForm1.UserPwd.value = ''
					TestForm1.certSn.value = ''
					TestForm1.sealList.value = ''
					TestForm1.plainData.value = ''
					TestForm1.showplainData.value = ''
					window.parent.postMessage({
						params: {certSn:'',sealSelect:'',signinfo:''},
						cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
					},'*');
				}
			});

			//输完密码后验证
			// var UserPwdId = document.getElementById("UserPwd");
			// UserPwdId.addEventListener("change", function() {
			// 	if(UserPwdId.value){
			// 		login()
			// 	}else{
			// 		alert('请输入密码')
			// 	}
			// });

			//选择签章列表
			var select = document.getElementById("sealList");
			select.addEventListener("change", function() {
				var selectedValue = select.options[select.selectedIndex].value;
				window.parent.postMessage({
					params: {sealSelect:selectedValue,typeSelectValue:TestForm1.typeList.value},
					cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
				},'*');
			});
			var typeSelect = document.getElementById("typeList");
			typeSelect.addEventListener("change", function() {
				if(passwordAuthentication){
					var typeSelectValue = typeSelect.options[typeSelect.selectedIndex].value;
					window.parent.postMessage({
						params: {sealSelect:TestForm1.sealList.value,typeSelectValue:typeSelectValue},
						cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
					},'*');
				}else{
					alert('请先验证pin码')
				}
				
			});
			var certSnId = document.getElementById("certSn");
			certSnId.addEventListener("change", function() {
				window.parent.postMessage({
					params: {certSn:certSnId.value},
					cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
				},'*');
			});
			function login()
			{
				var strCertID = TestForm1.UserList.value;
				var strPin = TestForm1.UserPwd.value;
				if(strCertID == "" ||strPin == "" ){
					alert("请插入ukey和输入Pin码！");
					return;
				}
				VerifyUserPIN(strCertID,strPin,function(retObj){
					if(retObj.retVal){//pin码正确
						alert("pin码验证成功！");
						getCertInfo()
						passwordAuthentication = true
						//由于js的方法都是回调的，所以实际集成的时候，在这里写执行后台获取pdf文档摘要、签名、签章等操作js代码
						
					}else{//pin码错误
						passwordAuthentication = false
						TestForm1.certSn.value = ''
						TestForm1.sealList.value = ''
						TestForm1.plainData.value = ''
						TestForm1.showplainData.value = ''
						window.parent.postMessage({
							params: {certSn:'',sealSelect:'',signinfo:''},
							cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
						},'*');
						GetUserPINRetryCount(strCertID, function(retObj){
							var retryCount = Number(retObj.retVal);
							if (retryCount > 0) {
								alert("校验证书密码失败!您还有" + retryCount + "次机会重试!");
								return;
							} else if (retryCount == 0) {
								alert("您的证书密码已被锁死,请联系GXCA进行解锁!");
								return;
							} else {
								alert("验证pin码失败!");
								return;
							}	
						})
					}
				})
				return false;
			}
			
			/*-----------------GetSignCert----------------*/
			function getCert()//获取证书
			{
				var strCertID = TestForm1.UserList.value;
				
				GetSignCert(strCertID, function(retObj){
					//console.log(retObj.retVal);
					TestForm1.showCert.value = retObj.retVal;
				})
			}

			/*-----------------getCertInfo----------------*/
			function getCertInfo()
			{
				var strCertID = TestForm1.UserList.value;
				var strPin = TestForm1.UserPwd.value;
				if(strCertID == ""){
					alert("请插入ukey！");
					return;
				}else if(strPin == ""){
					alert("请输入Pin码！");
					return;
				}
				
				// if(passwordAuthentication){
					// var cert = TestForm1.showCert.value;
					var type=2;
					var strCertID = TestForm1.UserList.value;
					GetSignCert(strCertID, function(retObj2){
						// TestForm1.showCert.value = retObj2.retVal;
						if(retObj2.retVal){
							GetCertBasicinfo(retObj2.retVal, type,function(retObj){
								//console.log(retObj.retVal);
								TestForm1.certSn.value = retObj.retVal;
								window.parent.postMessage({
									params: {certSn:TestForm1.certSn.value},
									cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
								},'*');
							})
						}
						
					})
				// }else{
				// 	alert('请先验证pin码')
				// }
				
				
				
				// if(TestForm1.certSn.value){
				// 	window.parent.postMessage({
				// 		params: {certSn:TestForm1.certSn.value},
				// 		cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
				// 	},'*');
				// }
				
			}
							
			/*-----------------signedData----------------*/
			function signedData(plainDataVal)//签名方法
			{
				var strcertSn = TestForm1.certSn.value;
				if(!strcertSn){
					alert("请获取或输入序列号！");
					return;
				}
				var strCertID = TestForm1.UserList.value;
				var data = plainDataVal;				
				SignedData(strCertID, data, function(retObj){
					//console.log("retObj.retVal[" + retObj.retVal+"]")
					if (retObj.retVal){
						TestForm1.showplainData.value = retObj.retVal;
						window.parent.postMessage({
							params: {signinfo:retObj.retVal,sealData:plainDataVal},
							cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
						},'*');
					}					
				})
				if(TestForm1.showplainData.value){
					window.parent.postMessage({
						params: {autograph:TestForm1.showplainData.value},
						cmd: "iframeOne" /*当有多个iframe页面传值时，可以设计通过其中的字段获取对应的值*/
					},'*');
				}
				//console.log(strCertID);
				//console.log(data)
			}
			
			/*-----------------verifysignedData----------------*/
			/*
			function verifysignedData()
			{
				var strCert = TestForm1.showCert.value;
				var strplain = TestForm1.plainData.value;	
				var strsignData = TestForm1.showplainData.value;				
				VerifySignedData(strCert, strplain, strsignData, function(retObj){
					//console.log(retObj.retVal)
					TestForm1.showsignData.value = retObj.retVal;
				})
				//console.log(strCert);
				//console.log(strplain);
				//console.log(strsignData);
			}
			 */


			

		</Script>
	</body>
</html>

